<template>
  <div id="payAudit">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="编号" width="180" />
      <el-table-column prop="money" label="金额" width="180" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="userId" label="员工ID" />
      <el-table-column label="凭证">
        <template slot-scope="scope">
          <el-button type="text" @click="proof(scope.row)">{{ evidence }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="pass(scope.row)">{{ scope.row.status }}</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="block">
      <span class="demonstration" />
      <el-pagination :current-page.sync="currentPage1" :page-size="pageSize" layout="total, prev, pager, next" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- 凭证模态框 -->
    <el-dialog title="凭证" :visible.sync="dialogVisible" width="30%">
      <div class="proof">
        <div class="demo-image__error">
          <div class="img">
            <el-image />
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 上传凭证模态框 -->
    <el-dialog title="上传凭证" :visible.sync="see" width="50%">
      <el-button type="primary" plain>点击上传</el-button>
      <br>
      只能上传jpg/png文件，且不超过500kb
      <span slot="footer" class="dialog-footer">
        <el-button @click="see = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
import qs from 'querystring'
export default {
  data() {
    return {
      input: '',
      tableData: [],
      currentPage1: 1,
      pageSize: 6,
      total: 0,
      dialogVisible: false,
      transfer: '',
      see: false
    }
  },
  computed: {
    evidence() {
      // 修改凭证
      this.tableData.forEach((item) => {
        if (item.transferAccounts == null) {//eslint-disable-line
          this.transfer = '上传凭证'
        } else if (item.transferAccounts != '') {//eslint-disable-line
          this.transfer = '查看凭证'
        }
      })
      return this.transfer
    }
  },
  created() {
    this.payQuery()
  },
  methods: {
    // 给审核绑定事件
    pass(row) {
      if (row.status == '审核') {//eslint-disable-line
        row.status = 1
        row.transactionTime = ''
        this.$axios.post('/waiter/waiterexamine', row, {
          contentType: 'application/json'
        }).then((response) => {
          // console.log(response)
          this.$message({
            message: '审核成功',
            type: 'success'
          })
          this.payQuery()
        })
      }
    },
    save() {
      this.see = false
      this.$message({
        message: '上传成功',
        type: 'success'
      })
    },
    // 给查看凭证绑定事件
    proof(row) {
      if (row.transferAccounts == null) {//eslint-disable-line
        // 给上传凭证绑定事件
        this.see = true
      } else {
        this.dialogVisible = true
      }
    },
    // 分页查询所有员工提现信息
    payQuery() {
      var data = {
        page: this.currentPage1 - 1,
        pageSize: this.pageSize

      }
      this.$axios.post('/waiter/queryShou', qs.stringify(data)).then((response) => {
        // console.log(response)
        this.tableData = response.data.data.list
        this.total = response.data.data.total
        this.tableData.forEach((item) => {
          if (item.status == 1) {//eslint-disable-line
            item.status = '已审核'
          } else {
            item.status = '审核'
          }
        })
        return this.tableData
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage1 = val
      this.payQuery()
    }
  }

}
</script>
<style scoped>
  .img{
        text-align: center;
        font-size: 14px;
        color: #c0c4cc;
        line-height: 300px;

  }
  .proof{
      width: 300px;
      height: 300px;
      background-color: #f5f7fa ;
      margin: 0 auto;
  }
</style>

